<!--
  author: tangcheng_cd
  create by: 2020/6/19
  descr:
-->
<template>
    <div class="update-user-info wly-page">
        <v-header title="修改个人信息"></v-header>
        <div class="update-user-info-content">
            <el-form
                :model="formData"
                :rules="rules"
                ref="userinfoForm"
                label-width="100px"
                label-position="right"
                label-suffix="："
                class="user-info-form"
            >
                <el-form-item label="员工号" prop="username">
                    <el-input size="mini" :maxLength="8" v-model="formData.username" readonly></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input size="mini" v-model="formData.name"></el-input>
                </el-form-item>
                <!--<el-form-item label="性别" prop="userSex">-->
                    <!--<template>-->
                        <!--<el-radio v-model="formData.userSex" label="0">男</el-radio>-->
                        <!--<el-radio v-model="formData.userSex" label="1">女</el-radio>-->
                    <!--</template>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="身份证号" prop="idNo">-->
                    <!--<el-input size="mini" :maxLength="18" v-model="formData.idNo"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="出生日期" prop="userBirthday">-->
                    <!--<el-date-picker-->
                        <!--v-model="formData.userBirthday"-->
                        <!--align="right"-->
                        <!--type="date"-->
                        <!--value-format="yyyyMMdd"-->
                        <!--:picker-options="pickerOptions0"-->
                        <!--placeholder="选择日期">-->
                    <!--</el-date-picker>-->
                <!--</el-form-item>-->
                <el-form-item label="手机号" prop="phone">
                    <el-input size="mini" :maxLength="11" v-model="formData.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input size="mini" v-model="formData.email" style="width:40%"></el-input>
                </el-form-item>
                <div class="button-grp">
                    <el-button type="primary" size="small" v-prevent-re-click @click="submitForm()">保存</el-button>
                    <el-button size="small" @click="goBack()" class="cancel">返 回</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { GET_USER_INFO} from '@api/url'
    import ajax from '@api/ajax'

    export default {
        name: 'update-user-info',
        data () {
            // 身份证号码验证
            let checkidentity = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('身份证不能为空'))
                } else {
                    const reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的身份证号码'))
                    }
                }
            }
            // 手机验证
            let checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'))
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的手机号'))
                    }
                }
            }
            // 邮箱验证
            let checkemail = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('邮箱不能为空'))
                } else {
                    const reg = /(\S)+[@]{1}(\S)+[.]{1}(\w)+/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的邮箱'))
                    }
                }
            }

            return {
                form: {},
                formData: {},
                //        禁止选择当前日期之前的日期
                pickerOptions0: {
                    disabledDate (time) {
                        return time.getTime() > Date.now()
                    }
                },
                rules: {
                    // userName: [
                    //     {required: true, message: '请输入姓名', trigger: 'blur'}
                    // ],
                    // idNo: [
                    //     {required: true, validator: checkidentity, trigger: 'blur'}
                    // ],
                    // userBirthday: [
                    //     {required: true, message: '请选择出生日期', trigger: 'blur'}
                    // ],
                    // userSexDesc: [
                    //     {required: true, message: '请选择性别', trigger: 'blur'}
                    // ],
                    // telephone: [
                    //     {validator: checkPhone, trigger: 'blur'}
                    // ],
                    // email: [
                    //     {required: true, message: '请输入邮箱', trigger: 'blur'},
                    //     {validator: checkemail, trigger: 'blur'}
                    // ]
                }
            }
        },
        methods: {
            fullScreenView () {
                global.open('/updateuserinfo', 'target')
            },
            getUserinfo () {
                let userInfo = this.$storeSave.state.userInfo
                ajax.post(GET_USER_INFO).then(res => {
                    let data = res.data
                    this.formData = data
                })
            },
            submitForm () {
                this.$refs.userinfoForm.validate((valid) => {
                    if (valid) {
                        ajax.post(USER_MODIFY, this.formData).then(res => {
                            this.$message.success('信息修改成功')
                            this.getUserinfo()
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            goBack () {
                this.$router.go(-1)
            }
        },
        created () {
            this.getUserinfo()
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .update-user-info
        height 100%
        overflow auto

        .update-user-info-content
            padding 10px 0 20px 10px

            .user-info-form
                margin-top 2%
                margin-left 20%

                .el-input
                    width 40%

                .button-grp
                    padding 20px 50px
</style>
